
import { Row, Col,Input ,Button,Table, Switch , Divider,Modal, message ,Pagination ,PaginationProps } from 'antd';
import '../../static/css/Administration/adlist.css'
import '../../static/css/App.css'
import React ,{FC,useEffect,useState} from "react";
import { NavigateFunction, useNavigate } from 'react-router'
import { ExclamationCircleOutlined } from '@ant-design/icons';

//接口
import {Adlists,Changestatus,Deladmin} from '../../apis/administrators' 

//列表
interface DataType {
  admin_id:number
  key: React.Key;
  name: string;
  department: number;
  address: string;
  zname:string;
  mobile:string;
  email:string;
  remarks:string;
  is_use:any;
  cz:any
}

// rowSelection object indicates the need for row selection


//列表接口
interface Prams {
  page:string
  pageSize:string
  idorname?:string
}

const { confirm } = Modal;

const Adlist:FC  = ():JSX.Element =>{
  const naviget = useNavigate()
  const showTotal: PaginationProps['showTotal'] = total => `Total ${total} items`;//分页
  const [delesinfo,setdeleinfo]:any = useState([])
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);//多选框
      setdeleinfo(selectedRowKeys)
      
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === 'Disabled User',
      name: record.name,
    }),
  };
  //列表
    const [shuju,setshuju]:any = useState()
    const [prams,setprams] = useState<Prams>({page:'1',pageSize:"6",idorname:''})
    const [total,settotal] = useState(0)
    const infoo = async() => {
      const res:any = await Adlists(prams)
     
      if(res.code==="00000"){
        // console.log(res);  
        setshuju(res.data)
        settotal(res.total)
        // console.log(shuju);
      }
    }
    useEffect(()=>{
      infoo()
    },[prams])

    
const columns: any = [
  {
    title: '部门名称',
    dataIndex: 'admin_name',
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: '部门',
    dataIndex: 'department',
  },
  {
    title: '角色',
    dataIndex: 'role',
    render:(text:number)=>{
      if(text===1){
        return <div>经管负责人</div>
      }else{
        return <div>部门负责人</div>
      }
    }
  },
  {
    title: '真实姓名',
    dataIndex: 'real_name',
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
  },
  {
    title: '备注',
    dataIndex: 'remarks',
  },
  {
    title: '是否启用',
    dataIndex: 'is_use',
    render:(text:number,record:any)=>{
      if(text===1){
        return <div><Switch defaultChecked   className="swkg" onChange={(checked)=>onChange(checked,record)} /></div>
      }else {
        return <div><Switch  className="swkg" onChange={(checked)=>onChange(checked,record)} /></div>
      }
    },
  },
  {
    title: '操作',
    dataIndex: 'admin_id',
    render:(text:string, record:any,index:number)=>(<div><Button type="primary" className="listtj" onClick={updaIndo(text)}>修改</Button><Button type="primary" danger className="topsc" onClick={showConfirm(text)}>删除</Button><Button type="primary" className="listxq" >详情</Button></div>)
  },
  
]; 
//修改
const updaIndo = (adminId:any) => {
  return () =>{

    // console.log(adminId);
    naviget(`/Admin/Adadd/?id=`+adminId)
    
  }
}

//批删
const showDeleteConfirm = (ids:any) => {
  return ()=>{
   if(ids.length===0){
     message.warning("请勾选")
   }else{
    confirm({
      title: '此操作将永久删除该数据, 是否继续?',
      icon: <ExclamationCircleOutlined />,
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        Deladmin({admin_id:ids}).then((res:any)=>{
          message.success("删除成功")
          infoo()
        })
       
      },
      onCancel() {
        message.warning('已取消删除');
      },
    });
   }
  }
 
};
//是否启用
const onChange = async(checked: any, record: any)=>{
    const _data={admin_id:record.admin_id,is_use:checked};
    const res = await Changestatus(_data)
    // console.log(res);
};
//删除
const showConfirm:any = (id:any) => {
  return () =>{
    confirm({
      title: '此操作将永久删除该数据, 是否继续?',
      icon: <ExclamationCircleOutlined />,
      onOk() {
      
        Deladmin({admin_id:id}).then((res:any)=>{
          // console.log(res);
          message.success('删除成功!');
          infoo()

        })
      },
      onCancel() {
        message.warning('已取消删除');
      },
    });
   }
};
// 分页
  const ffy = (a:any,b:any) => {
    // console.log(a);
    // console.log(b);
    setprams({...prams,page:a,pageSize:b}) 
  }

  
  //查询
  const [idorname,setidorname] = useState()
  const query = (e:any) => {
    // console.log(e);
    setidorname(e.target.value)
  }
  const qdquery = (e:any) =>{
    return () =>{
      // console.log(e);
      setprams({...prams,idorname:e})
      
    }
  }
  //添加跳转
  const goadd = () => {
    naviget('/Admin/Adadd')
  }
   
    return (
        <div className='adminList'>
            <div>
            <Row style={{backgroundColor:"#fff"}}>
                <Col span={24}>
                    <Input placeholder="请输入要查询的管理员名称" className="topinput"onChange={query} value={idorname} />          
                    <Button type="primary" className="topcx" onClick={qdquery(idorname)}>查询</Button>
                    <Button type="primary" className="toptj" onClick={goadd}>添加</Button>
                    <Button type="primary" danger className="topsc"  onClick={showDeleteConfirm(delesinfo)}>批量删除</Button>
                </Col>
            </Row>
            </div>
            <div>
                <div>
                <Divider />
                <Table
                    rowSelection={{
                    // type:
                    ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={shuju}
                    rowKey="admin_id"
                    pagination={false}
                />
                </div>
                <div className="hh"><Pagination size="small" total={total} showTotal={total=>`共${total}条`} showSizeChanger showQuickJumper onChange={ffy}/></div>
            </div>
        </div>
    )
}

export default Adlist
